<template>
  <div class="my_read">
    <div class="my_read_header">
      <input type="text" placeholder="   请输入搜索内容" />
      <button><van-icon name="scan" />扫一扫</button>
    </div>
    <swiper autoplay indicator-dots circular>
      <swiper-item v-for="(item, index) in ReadList.ads" :key="index">
        <navigator :url="item.route">
          <img :src="item.img" alt="" mode="widthFix" />
        </navigator>
      </swiper-item>
    </swiper>
    <div class="my_read_tab">
      <div
        class="my_read_tab_list"
        v-for="(item, index) in ReadList.menus"
        :key="index"
      >
        <navigator :url="item.route">
          <img :src="item.icon" alt="" />
          <p>{{ item.name }}</p>
        </navigator>
      </div>
    </div>

    <div class="my_read_TodayList">
      <p class="my_read_body_header">{{ TodayList.name }}</p>
      <navigator url="/pages/aboutUs/index">
        <dl class="my_read_body_main">
          <dt>
            <img
              class="my_read_body_img"
              :src="TodayList.units[0].cover"
              alt=""
            />
          </dt>
          <dd class="my_read_body_title">
            <h5>{{ TodayList.units[0].title }}</h5>
            <p>{{ TodayList.units[0].desp }}</p>
          </dd>
        </dl>
      </navigator>
    </div>
    <div class="my_read_BabyList">
      <p class="my_read_body_header">
        {{ FirstList.name }}<span class="more_items">更多></span>
      </p>
      <dl class="my_read_body_main" v-for="(item, index) in FirstList.units">
        <dt>
          <img class="my_read_body_img" :src="item.cover" alt="" />
        </dt>
        <dd class="my_read_body_title">
          <h5>{{ item.title }}</h5>
          <p>{{ item.desp }}</p>
        </dd>
      </dl>
    </div>
    <div class="my_read_body_tab">
      <p class="my_read_body_header">
        {{ TabColorList.name }}<span class="more_items">更多></span>
      </p>
      <div class="my_read_body_tab_list">
        <div
          class="my_read_body_tab_list_item"
          v-for="item in TabColorList.units"
          :key="item.id"
        >
          <img :src="item.cover" alt="" />
          <p>{{ item.title }}</p>
          <span>&emsp;&emsp;&emsp;{{ item.bottomDesp }}</span>
        </div>
      </div>
    </div>
    <div
      class="my_read_body"
      v-for="(item, index) in ReadList.items"
      :key="index"
    >
      <p class="my_read_body_header">
        {{ item.name }}<span class="more_items">更多></span>
      </p>
      <dl
        class="my_read_body_items"
        v-for="(ite, ind) in item.units"
        :key="ite.id"
      >
        <dt>
          <img class="my_read_body_img" :src="ite.cover" alt="" />
        </dt>
        <dd class="my_read_body_title">
          <h5>{{ ite.title }}</h5>
          <p>{{ ite.desp }}</p>
          <span class="readList">{{ ite.bottomDesp }}</span>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getReadList } from "@/service";

export default {
  data() {
    return {
      ReadList: null,
      TodayList: null,
      FirstList: null,
      TabColorList: null,
    };
  },
  async onShow() {
    var getRead = await getReadList();
    this.TodayList = getRead.items.shift();
    this.FirstList = getRead.items.shift();
    this.TabColorList = getRead.items.shift();
    this.ReadList = getRead;
    console.log(this.TabColorList);
  },
  methods: {},
};
</script>

<style scoped>
.my_read {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
.my_read_header {
  width: 100%;
  height: 60rpx;
  display: flex;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.my_read_header input {
  border: 1px solid #ccc;
  height: 60rpx;
  width: 65%;
  margin-left: 5%;
  line-height: 60rpx;
  align-items: center;
  border-radius: 10rpx;
}

.my_read_header button {
  line-height: 60rpx;
}

swiper {
  height: 225rpx;
  width: 100%;
}
swiper img {
  width: 100%;
  height: 225rpx;
}
.my_read_tab {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25rpx;
}
.my_read_tab_list {
  width: 18%;
  text-align: center;
}
.my_read_tab_list img {
  width: 100rpx;
  height: 100rpx;
  /* margin: 10rpx; */
}
.my_read_tab_list p {
  text-align: center;
  font-size: 24rpx;
}
.my_read_body {
  width: 100%;
}
.my_read_body_header {
  line-height: 80rpx;
  font-size: 40rpx;
  position: relative;
}
.my_read_TodayList {
  width: 100%;
  margin-top: 25rpx;
}
.my_read_body_main {
  width: 100%;
  display: flex;
}
.my_read_body_img {
  width: 180rpx;
  height: 180rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.my_read_body_title p {
  font-size: 20rpx;
  color: rgb(169, 169, 169);
  display: block; /* 当前元素本身是inline的，因此需要设置成block模式 */
  white-space: wrap; /*因为设置了block，所以需要设置nowrap来确保不换行 */
  height: 110rpx;
  overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
  text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
}
.my_read_body_title h5 {
  font-size: 30rpx;
  margin-top: 20rpx;
}
.my_read_body_items {
  display: flex;
}
.my_read_BabyList {
  width: 100%;
}
.more_items {
  font-size: 25rpx;
  position: absolute;
  right: 0;
}
.my_read_body_title {
  position: relative;
}
.readList {
  position: absolute;
  bottom: 0;
  font-size: 25rpx;
}
.my_read_body_tab {
  width: 100%;
}
.my_read_body_tab_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my_read_body_tab_list_item {
  width: 32%;
  position: relative;
}
.my_read_body_tab_list_item img {
  width: 90%;
  height: 230rpx;
  margin: 5%;
  border-radius: 20rpx;
}
.my_read_body_tab_list_item p {
  font-size: 25rpx;
  text-align: center;
}
.my_read_body_tab_list_item span {
  position: absolute;
  bottom: 60rpx;
  color: #fff;
  font-size: 24rpx;
}
</style>
